<!DOCTYPE HTML>
<html>

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>定宽块状元素水平居中</title>
    <style>
        div {
            border: 1px solid red;

            width: 200px;
            /* margin-left 与 margin-right 设置为 auto */
            margin: 20px auto;
            /* 注意：元素的“上下 margin” 是可以随意设置的。 */
        }
    </style>
</head>

<body>
    <div>我是定宽块状元素，我要水平居中显示。</div>
</body>

</html>

<!-- 当被设置元素为 块状元素 时用 text-align：center 就不起作用了，这时也分两种情况：定宽块状元素和不定宽块状元素。

这一小节我们先来讲一讲定宽块状元素。(定宽块状元素：块状元素的宽度width为固定值。)

满足 定宽 和 块状 两个条件的元素是可以通过设置“左右margin”值为“auto”来实现居中的。 -->